<template>
  <view class="page-wrapper">
    <view class="address-wrapper">
      <view class="item-address" v-for="item in list" :key="item.id" @click="getAddressItem(item)">
        <view class="item-user">
          <view class="name">{{item.name}}</view>
          <view class="tel">{{formatPhone(item.tel)}}</view>
          <view class="default" v-if="item.isDefault && item.isDefault===1">默认</view>
          <view class="edit" @click.stop="eidtShippingAddress(item)">
            <u--image src="/static/edit.png" width="36rpx" height="36rpx"></u--image>
          </view>
        </view>
        <view class="item-detail">{{item.provinceName}}{{item.cityName}}{{item.countyName}}{{item.addressDetail}}</view>
      </view>
    </view>
    <view v-if="emptyVisible" class="empty">
    	<image src="/static/empty.png"></image>
    	<text>无数据</text>
    </view>
    <view class="action-bottom">
      <u-button text="一键获取微信地址" color="#CF1A1B" :plain="true" @click="handleAction('get')"></u-button>
      <u-button text="+ 添加收货地址" color="#FFFFFF" :customStyle="{background:'#CF1A1B'}"
        @click="handleAction('go')"></u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        total: 0,
        emptyVisible: false
      };
    },
    computed: {
      formatPhone(phone) {
        return function(phone) {
          if (phone && phone.length === 11) {
            return phone.substr(0, 3) + "****" + phone.substr(7)
          } else {
            return phone //非手机号
          }
        }
      }
    },
    methods: {
      async initData() {
        uni.showLoading({
          title: '加载中...'
        })
        try {
          let res = await this.$request({
            method: 'POST',
            url: '/api-user/address/list',
            data: {
              pageNum: "1",
              pageSize: "100"
            }
          })
          if (res && res.datas) {
            this.list = res.datas.data
            this.total = res.datas.count
            this.emptyVisible = this.total === 0
          }
        } catch (e) {
          uni.hideLoading()
          console.log('getAddressList..', e)
        } finally {
          uni.hideLoading()
        }
      },
      addAddress() {
        //获取微信内的收获地址
        let _this = this
        uni.chooseAddress({
          success(res) {
            const {
              userName,
              telNumber,
              provinceName,
              cityName,
              countyName,
              detailInfo
            } = res
            let data = {
              name: userName,
              tel: telNumber,
              provinceName: provinceName,
              cityName: cityName,
              countyName: countyName,
              addressDetail: detailInfo,
              isDefault: _this.list.length === 0 ? 1 : 0
            }
            _this.$request({
              method: 'POST',
              url: '/user-center/address/save',
              data: data
            }).then((res) => {
              if (res && res.respCode === 200) { 
                _this.initData()
              }
            }).catch((e) => {
              console.log('保存收获地址失败', e)
            })
          },
          fail(err) {
            console.error(err)
          }
        })
      },
      handleAction(type) {
        if (type === 'get') {
          this.addAddress()
        } else {
          uni.navigateTo({
            url: `/minePack/components/shippingAddressForm?type=add`
          })
        }
      },
      eidtShippingAddress(item) {
        let info = encodeURIComponent(JSON.stringify(item))
        uni.navigateTo({
          url: `/minePack/components/shippingAddressForm?type=edit&info=${info}`
        })
      },
      //供其他页面使用选取地址
      getAddressItem(item) {
        this.getOpenerEventChannel().emit('getAddressItem', item)
      }
    },
    onLoad() {
      this.initData()
      uni.$on('refreshAddress',res => {
        this.initData()
      })
    }
  }
</script>

<style lang="scss" scoped>
  .page-wrapper {
    overflow: auto;
    .address-wrapper {
      padding-bottom: 70px;
    }
  }
  .item-address {
    padding-left: 32rpx;
    padding-bottom: 20rpx;
    padding-right: 20rpx;
    margin-bottom: 20rpx;
    background-color: #FFFFFF;
    position: relative;

    .item-user {
      display: flex;
      font-size: 28rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      padding-top: 32rpx;
      padding-right: 32rpx;

      .tel {
        margin-left: 24rpx;
      }

      .default {
        margin-left: 24rpx;
        width: 84rpx;
        height: 40rpx;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        border: 2rpx solid #CF1A1B;
        color: #CF1A1B;
        text-align: center;
      }

      .edit {
        position: absolute;
        right: 32rpx;
        top: 10rpx;
		padding: 20rpx;
      }

    }

    .item-detail {
      padding-top: 20rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      word-break: break-all;
    }
  }

  .action-bottom {
    height: 70px;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #FFFFFF;

    /deep/ .u-button {
      margin: 0 32rpx;
      border-radius: 8rpx;
    }
  }
  .empty {
  	width: 100%;
  	height: 80%;
  	position: absolute;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
  	image {
  		width: 220px;
  		height: 180px;
  	}
  	text {
  		font-size: 30rpx;
  		color: rgba(0,0,0,0.45);
  		line-height: 30rpx;
  	}
  }
</style>